<template>
	<!-- #ifdef APP -->
		<assNavbar title="消息" :messageTitleShow="false">
			<template #left>
				<image class="message-image" @click="myInfo"
					:src="iMMyInfo && iMMyInfo.avatar ? sheep.$url.cdn(iMMyInfo.avatar) : 'http://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/static/img/default_avatar.png'">
				</image>
			</template>
			<template #center>
				<view class="message-search-box ss-flex justify-start ss-p-x-20">
					<uni-icons type="search" size="20" color="rgb(192, 196, 204)"></uni-icons>
					<input :value="keyword" class="ss-m-l-20 ss-m-r-20" type="text" placeholder="搜索内容"
						placeholder-style="font-size:30rpx;color:#ABABAB;" confirm-type="search" @confirm="confirm">
					<uni-icons type="clear" size="20" color="#999999" v-show="keyword.length >= 1"
						@click="clearKeyword"></uni-icons>
				</view>
			</template>
			<template #right>
				<view class="ss-flex">
					<view class="ss-m-r-20">
						<uni-icons type="scan" size="28" color="#333" @click="scanCode"></uni-icons>
					</view>
					<view class="staff-box">
						<uni-icons type="staff" size="35" style="margin-right: 20rpx;" @click="myFriend"></uni-icons>
						<view class="staff-num" v-if="unreadCount > 0">{{unreadCount}}</view>
					</view>
				</view>
			</template>
		</assNavbar>
	
		<uni-load-more v-if="message_Request === true" status="loading" :content-text="{
		        contentdown: '上拉加载更多',
		      }" />
		<s-empty v-if="chatList.length === 0 && message_Request === false"
			icon="https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/vocal/data-empty.png" text="暂无数据">
		</s-empty>
		<view class="chat-con" v-if="chatList.length >= 1">
			<view class="" v-for="(item, index) in chatList" :key="index" @click="jump(item)">
				<view class="item-chat" v-if="item.type === 'C2C'">
					<view class="item-image">
						<image
							:src="sheep.$url.cdn(item.userProfile.avatar) || 'http://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/static/img/default_avatar.png'"
							mode="aspectFill"></image>
						<view class="dot" v-if="item.unreadCount > 0">
							<text v-if="item.unreadCount > 99" class="info">99+</text>
							<text v-else class="info">{{ item.unreadCount }}</text>
						</view>
					</view>
					<view class="item-name">
						<view class="name">
							{{ item.userProfile.nick || item.userProfile.userID }}
						</view>
						<view class="item-tips">
							<view class="item-tips-content" v-if="!item.lastMessage.isRevoked">
								<view v-if="item.lastMessage.type === 'TIMTextElem'">
									{{ item.lastMessage.messageForShow }}
								</view>
								<view v-if="item.lastMessage.type === 'TIMImageElem'">[图片]</view>
								<view v-if="item.lastMessage.type === 'TIMSoundElem'">[语音]</view>
								<view v-if="item.lastMessage.type === 'TIMVideoFileElem'">[视频]</view>
								<view v-if="item.lastMessage.type === 'TIMFaceElem'">[表情]</view>
								<view v-if="item.lastMessage.type === 'TIMCustomElem'">{{item.lastMessage.messageForShow}}</view>
							</view>
							<view class="" v-else>
								<text v-if="userInfo.mobile === item.lastMessage.fromAccount">你撤回了一条消息</text>
								<text v-else>撤回了一条消息</text>
							</view>
						</view>
					</view>
					<view class="item-time">
						<view class="time">
							{{ TimeString(item.lastMessage.lastTime) }}
						</view>
					</view>
				</view>
				<view class="item-chat" v-else-if="item.type === 'GROUP'">
					<view class="item-image">
						<image
							:src="item.groupProfile.avatar || 'https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/20231117163016c941b7397.png'"
							mode="aspectFill"></image>
						<view class="dot"
							v-if="item.unreadCount > 0 && item.groupProfile.selfInfo.messageRemindType !== 'AcceptNotNotify'">
							<text v-if="item.unreadCount > 99" class="info">99+</text>
							<text v-else class="info">{{ item.unreadCount }}</text>
						</view>
					</view>
					<view class="item-name">
						<view class="name">
							{{ item.groupProfile.name || item.groupProfile.groupID }}
						</view>
						<view class="item-tips">
							<view class="item-tips-content" v-if="!item.lastMessage.isRevoked">
								<text v-if="item.lastMessage.fromAccount === '@TIM#SYSTEM'">
									{{item.lastMessage.messageForShow }}</text>
								<text v-else>{{ item.lastMessage.messageForShow }}</text>
							</view>
							<view class="" v-else>
								<text v-if="userInfo.mobile === item.lastMessage.fromAccount">你撤回了一条消息</text>
								<text v-else>撤回了一条消息</text>
							</view>
						</view>
					</view>
					<view class="item-time">
						<view class="time">
							{{ TimeString(item.lastMessage.lastTime) }}
						</view>
					</view>
				</view>
			</view>
		</view>
	<!-- #endif -->
</template>

<script setup>
	import {
		ref,
		computed,
		reactive,
	} from 'vue';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import sheep from '@/sheep';
	// #ifdef APP
	import assNavbar from './components/ass-navbar.vue'
	// #endif
	
	onLoad(async (options) => {
		
	})
	
	onShow(() => {
		// #ifdef MP-WEIXIN
		if (sheep.$store('user').isLogin) {
			const AreYouIn = uni.getStorageSync('AreYouIn')
			if (!AreYouIn) {
				uni.navigateTo({
					url: '/im/pages/web'
				})
			} else {
				uni.switchTab({
					url: '/pages/index/index'
				})
				uni.setStorageSync('AreYouIn', false)
			}
		} else {
			uni.navigateTo({
				url: '/pages/login/index'
			});
		}
		// #endif
		// #ifdef APP
		if (!sheep.$store('user').isLogin) {
			uni.navigateTo({
				url: '/pages/login/index'
			});
		}
		sheep.$store('im').showNetwork()
		// #endif
	})
	
	// #ifdef APP
	const chatList = computed(() => sheep.$store('im').messageList);
	const iMMyInfo = computed(() => sheep.$store('im').userInfo);
	const isLogin = computed(() => sheep.$store('user').isLogin);
	const message_Request = computed(() => sheep.$store('im').message_Request);
	const networkStatus = computed(() => sheep.$store('im').networkStatus)
	const keyword = computed(() => sheep.$store('im').keyword)
	const unreadCount = computed(() => sheep.$store('im').unreadCount)
	
	// 跳转聊天详情
	const jump = (item) => {
		console.log(item)
		if (item.type === 'C2C') {
			// 单聊
			sheep.$store('im').getChatInfo(item.conversationID, 'chat',item.account)
		} else {
			// 群聊
			sheep.$store('im').getChatInfo(item.conversationID, 'group',item.account)
		}
	}
	
	// 我的好友
	const myFriend = () => {
		uni.navigateTo({
			url: '/pages/im/myFriend'
		})
	}
	
	// 扫码
	const scanCode = () => {
		uni.showToast({
			title: '小程序暂不支持!',
			icon: 'none',
			duration: 2000
		});
	}
	
	// 搜索
	const confirm = (e) => {
		sheep.$store('im').setKeyword(e.detail.value)
		sheep.$store('im').getMessageList()
	}
	
	const clearKeyword = () => {
		sheep.$store('im').setKeyword('')
		sheep.$store('im').getMessageList()
	}
	
	
	// 我的群聊邀请码
	const myInfo = () => {
		if (uni.getStorageSync('udid') !== 'mc') {
			return
		}
		uni.request({
			url: 'https://im-beta.shisan-xi.work/api/settings/myGroup',
			method: 'GET',
			data: {
				mobile: iMMyInfo.value.userID,
				platform: uni.getStorageSync('udid') || 'pet'
			},
			success(res) {
				if (res.data.code === 1) {
					let promise = wx.$app.getGroupProfile({
						groupID: res.data.data
					});
					promise.then(function(imResponse) {
						uni.navigateTo({
							url: `/pages/im/groupCode?group_id=${imResponse.data.group.groupID}&group_name=${imResponse.data.group.name}&groupImage=${imResponse.data.group.avatar}`
						})
					}).catch(function(imError) {
						console.warn('getGroupProfile error:', imError); // 获取群详细资料失败的相关信息
					});
				}
			}
		})
	}
	
	
	const TimeString = (time) => {
		const dateTime = new Date(time.replace(' ', 'T'));
		const timestamp = dateTime.getTime() / 1000; // 转换为秒级时间戳
		return sheep.$helper.timeFrom(timestamp)
	}
	// #endif
</script>

<style scoped lang="scss">
	.message-image {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		margin: 8rpx 0 0 10rpx;
	}
	
	.message-search-box {
		width: 466rpx;
		box-sizing: border-box;
		overflow: hidden;
		height: 36px;
		border-radius: 16px;
		background-color: rgb(245, 245, 245);
	
	
		input {
			width: 380rpx;
			height: 36px;
			line-height: 36px;
			color: #333;
		}
	}
	
	
	.chat-con {
		.item-chat {
			width: calc(100% - 48rpx);
			padding: 24rpx;
			display: flex;
			border-bottom: 1px solid #f1f1f1;
	
			image {
				width: 80rpx;
				height: 80rpx;
				border-radius: 10rpx;
			}
	
			.item-name {
				width: calc(100% - 280rpx);
				margin-left: 20rpx;
			}
	
			.item-time {
				text-align: right;
				width: 180rpx;
	
				.time {
					font-size: 22rpx;
					color: #ccc;
				}
			}
	
			.item-tips {
	
				color: #b9b4b4;
				font-size: 24rpx;
				margin-top: 10rpx;
	
				.item-tips-content {
					width: 500rpx;
					-webkit-line-clamp: 1;
	
					display: -webkit-box;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
	
			.item-image {
				width: 80rpx;
				height: 80rpx;
				position: relative;
			}
	
			.dot {
				width: 30rpx;
				height: 30rpx;
				font-size: 22rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 50%;
				background-color: red;
				color: #fff;
				position: absolute;
				right: -10rpx;
				top: -10rpx;
			}
		}
	}
	
	.add-overlay {
		width: 240rpx;
		/* height: 250rpx; */
		background-color: #fff;
		border-radius: 10rpx;
		position: absolute;
		right: 10rpx;
		padding: 0 20rpx;
		z-index: 9999;
	
		.add-up {
			width: 0;
			height: 0;
			border-top: 20rpx solid transparent;
			border-right: 20rpx solid transparent;
			border-left: 20rpx solid transparent;
			border-bottom: 20rpx solid white;
			margin-top: -36rpx;
			margin-left: 205rpx;
		}
	
		.add-item {
			display: flex;
			align-items: center;
			padding: 15rpx 0;
	
			.add-name {
				margin-left: 15rpx;
				font-size: 28rpx;
			}
		}
	}
	
	.staff-box {
		width: 100%;
		height: 100%;
		position: relative;
	
		.staff-num {
			width: 30rpx;
			height: 30rpx;
			font-size: 22rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50%;
			background-color: red;
			color: #fff;
			position: absolute;
			right: 18rpx;
			top: -2rpx;
		}
	}
</style>